<html>
<head>
    <meta charset="utf-8">
    <meta name="author" content="Ajj">
    <title>下拉</title>
    <style>
        ul,li{
            list-style: none;
            display: inline-block;
        }
        ul{
            width: 909px;
            height: 37px;
            line-height: 23px;
            background-image: linear-gradient(#769bbf,#225d98);
            border-radius: 8px;
            color: white;
        }
        li{
            margin: 0 10px;
            padding: 5px 10px;
            cursor: pointer;
        }
        p div{
            border: 1px solid blue;
            border-radius: 5px;
            line-height: 30px;
            background-color: #dde6ef;            
        }
        p div section{
            display: inline-block;
            padding: 0 5px;
        }
        p section:hover{ 
            color: blue;
            cursor: pointer;
            border-bottom: 1px solid red;
        }   
        p{
            position: absolute;
            top: 55px;
        }
        .zhan:hover{
            color: blue;
        }
    </style>
</head>
<body>
    <ul>
        <li class="zhan">站长之家</li>
        <li class="li">行业资讯</li>
        <li class="li">站长在线</li>
        <li class="li">网站运营</li>
        <li class="li">设计在线</li>
        <li class="li">网络编程</li>
        <li class="li">联盟资讯</li>
        <li class="li">服务器</li>
    </ul>
    <p></p>
</body>
</html>
<script>
    var li=document.querySelectorAll('.li');
    var p=document.querySelector('p');
    var ul=document.querySelector('ul');
    
    var arr=[
        '业界动态|收购融资|门户动态|搜索引擎|网络游戏|电子商务',
        '站长报道|好站推荐|站长聚会|站长访问|站长茶馆|网站排名',
        '建站经验|策划盈利|搜索优化|网站推广|免费资源|网站排名',
        '酷站推荐|网页设计|WEB标准|视频处理|设计活动|网站排名',
        'ASP编程|Php编程|.Net编程|Xml编程|Access Mssql|Mysql',
        '联盟动态|联盟介绍|联盟点评|网赚技巧|网站推广|免费资源',
        'Web服务器|Ftp服务器|Mail服务器|Win服务器|Linux服务器|免费资源'
    ];
    var index=0;
    for(var i=0;i<li.length;i++){
        li[i].index=i;
        li[i].onmouseover=function(){
            console.log(this.index);
            // this.index=arr1;
            li[this.index].style.color='blue';
            p.innerHTML='<div><section>' + arr[this.index].split('|')[0] + '</section>'+
                        '<section>' + arr[this.index].split('|')[1] + '</section>'+
                        '<section>' + arr[this.index].split('|')[2] + '</section>'+
                        '<section>' + arr[this.index].split('|')[3] + '</section>'+
                        '<section>' + arr[this.index].split('|')[4] + '</section>'+
                        '<section>' + arr[this.index].split('|')[5] + '</section></div>';
            p.style.left=ul.offsetLeft+this.offsetWidth*this.index+'px';            
        }
        li[i].onmouseout=function(){
            li[this.index].style.color='white';
        }
    }
</script>